<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css变量var的使用</title>
		<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes">
		<style>
			*{box-sizing: border-box;}
			body{padding: 0 10px;margin: 0;overflow-x: hidden;}
			h3{margin-top: 0;margin-bottom: 20px;}
			h3:not(:first-child){margin-top: 20px;}
			.red{color: red;}
			p{padding:4px 4px 4px 10px;margin-top: 0;margin-bottom: 10px;}
			p.code{background-color: #f5f5f5;}
			.panel{padding: 10px;margin-bottom: 20px;background-color: #fff;box-shadow: 0 2px 10px rgba(0,0,0,.2);}
		</style>
	</head>
	<body>
		<div class="panel">
			<h3>css变量var()的使用</h3>
			<p class="code">:root&nbsp;{&nbsp;--bc-color&nbsp;:&nbsp;#fff;&nbsp;}</p>
			<p class="code">div&nbsp;{&nbsp;background-color&nbsp;:&nbsp;var(--bc-color);&nbsp;}</p>
		</div>
		<div class="panel">
			<h3>定义语法</h3>
			<p class="code">--变量名称</p>
			<p>必须以“--”开头，命名时可以使用“数字”、“字母”、“下划线”和“短横线”，也可以使用中文，日文或者韩文</p>
			<p>例如</p>
			<p class="code">-bc-color&nbsp;:&nbsp;red;</p>
			<p class="code">--红色背景&nbsp;:&nbsp;red;</p>
		</div>
		<div class="panel">
			<h3>使用语法</h3>
			<p class="code">var(--变量名称)</p>
			<p>例如</p>
			<p class="code">var(--bc-color)</p>
			<p class="code">var(--红色背景)</p>
		</div>
		<div class="panel">
			<h3>加默认值</h3>
			<p>例如</p>
			<p class="code">{&nbsp;background-color: var(--bc-color&nbsp;,&nbsp;#fff)&nbsp;}</p>
		</div>
		<div class="panel">
			<h3>配合calc使用</h3>
			<p>例如</p>
			<p class="code">:root&nbsp;{&nbsp;--count:10;&nbsp;}</p>
			<p class="code">div&nbsp;{&nbsp;width:calc(100px * var&nbsp;(&nbsp;--count&nbsp;)&nbsp;);&nbsp;}</p>
		</div>
		<div class="panel">
			<h3>注意</h3>
			<p>例如</p>
			<p class="code">div {<br />
				  &nbsp;--size: 20;<br />
				  &nbsp;font-size: var(--size)px;<br />   
				}
			</p> 
			<p>此时font-size:var(--size)px等同于font-size:20 px，20后面有空格，导致该样式不生效。</p>
			<p>修改为</p>
			<p class="code">div {<br />
				  &nbsp;--size: 20px;<br />
				  &nbsp;font-size: var(--size);<br />   
				}
			</p>
		</div>
	</body>
</html>
